<template>
  <div>
    <canvas class="myCanvas">
      <p>添加恰当的回退信息。</p>
    </canvas>
  </div>
</template>
<script>
export default {
  data () {
    return {

    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      /*画板 */
      // const canvas = document.querySelector(".myCanvas");
      // const width = (canvas.width = window.innerWidth);
      // const height = (canvas.height = window.innerHeight);
      // const ctx = canvas.getContext("2d");
      // ctx.fillStyle = "rgb(0, 0, 0)";//背景填充颜色
      // ctx.fillRect(0, 0, width - 260, height - 120);//位置和大小
      // ctx.strokeStyle = "rgb(255，255，255)";//描边颜色
      // ctx.lineWidth = 2;//描边宽度,必须在ctx.strokeRect（）绘制边框前进行设置，否则不生效
      // ctx.strokeRect(0, 0, width - 260, height - 120);

      // //将角度转换为弧度
      // function degToRad (degrees) {
      //   return degrees * Math.PI / 180;
      // };

      // //绘制三角形
      // ctx.fillStyle = '#e9f0f6';
      // ctx.beginPath();
      // ctx.moveTo(50, 50);//将笔跳至坐标点
      // ctx.lineTo(150, 50);//将笔移动到坐标点含路径
      // /*degToRad(60)将60度转为弧度
      // Math.tan计算给定角度的正切*/
      // const triHeight = 50 * Math.tan(degToRad(60));
      // ctx.lineTo(100, 50 + triHeight);
      // ctx.lineTo(50, 50);
      // ctx.fill();

      // //绘制圆形
      // /*arc: 前两个指定圆心的位置坐标，第三个是圆的半径，
      // 第四、五个是绘制弧的起、止角度（给定 0° 和 360° 便能绘制一个完整的圆），
      // 第六个参数指定圆是应该逆时针绘制还是顺时针绘制（false 是顺时针）*/
      // ctx.fillStyle = '#bcb5ad';
      // ctx.beginPath();
      // ctx.arc(150, 106, 50, degToRad(0), degToRad(360), false);
      // ctx.fill()

      // //绘制扇形
      // ctx.fillStyle = 'white';
      // ctx.beginPath();
      // ctx.arc(200, 106, 50, degToRad(-45), degToRad(45), true);
      // ctx.lineTo(200, 106);//绘制终点为圆心的线，如删除，则直接连接弧的两个端点
      // ctx.fill();

      //绘制文字
      // ctx.strokeStyle = "white";
      // ctx.lineWidth = 1;
      // ctx.font = "36px arial";
      // ctx.strokeText("Canvas text", 240, 50);

      // ctx.fillStyle = "red";
      // ctx.font = "48px georgia";
      // ctx.fillText("Canvas text", 240, 150);

      // canvas.setAttribute("aria-label", "Canvas text");

      //图片
      // const image = new Image();
      // image.src = "/resources/images/user.png";
      // image.addEventListener("load", () =>
      //   ctx.drawImage(image, 20, 20, 1100, 1080, 50, 180, 185, 175));
      // /** drawImage()嵌入图片
      //  * 参数2、3：原图左上角坐标; 4、5:原图宽高;
      //  * 参数6、7：画板左上角坐标; 8、9：在画板上宽高 */
      // canvas.setAttribute("aria-label", " head sculpture");
      // //setAttribute():设置属性;aria-label 属性定义了一个字符串值，用于为交互元素提供标签的内容

      // ctx.translate(width / 2, height / 2);//将原点（0，0）移动到画布中心


      /**循环迭代 */
      // function degToRad (degrees) {
      //   return (degrees * Math.PI) / 180;
      // }

      // let length = 250;
      // let moveOffset = 20;

      // for (let i = 0; i < length; i++) {
      //   ctx.fillStyle =
      //     "rgba(" + (255 - length) + ", 185, " + (255 - length) + ", 0.9)";
      //   ctx.beginPath();
      //   ctx.moveTo(moveOffset, moveOffset);
      //   ctx.lineTo(moveOffset + length, moveOffset);
      //   const triHeight = (length / 2) * Math.tan(degToRad(60));
      //   ctx.lineTo(moveOffset + length / 2, moveOffset + triHeight);
      //   ctx.lineTo(moveOffset, moveOffset);
      //   ctx.fill();

      //   length--;
      //   moveOffset += 0.7;
      //   ctx.rotate(degToRad(5));//旋转角度
      // }





      /**动画 */
      const canvas = document.querySelector('.myCanvas');
      const width = canvas.width = window.innerWidth;
      const height = canvas.height = window.innerHeight;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = 'rgb(0,0,0)';
      ctx.fillRect(0, 0, width, height);

      ctx.translate(width / 2, height / 2);

      const image = new Image();
      image.src = '/resources/images/user.png';
      image.onload = draw;

      let sprite = 0;
      let posX = 0;

      function draw () {
        ctx.fillRect(-(width / 2), -(height / 2), width, height);
        ctx.drawImage(image, (sprite * 102), 0, 102, 148, 0 + posX, -74, 102, 148);

        if (posX % 13 === 0) {
          if (sprite === 5) {
            sprite = 0;
          } else {
            sprite++;
          }
        }

        if (posX > width / 2) {
          let newStartPos = -((width / 2) + 102);
          posX = Math.ceil(newStartPos);
          console.log(posX);
        } else {
          posX += 2;
        }

        window.requestAnimationFrame(draw);
      };



    }

  }

}
</script>
<style scoped>
</style>